import React, {Component} from 'react';
import {Button, Alert, Icon} from 'antd';
import {connect} from 'react-redux';
import {CommonTable} from 'components';
import styles from './BusinessRepeatCheck.less';
import {covertUrlParams, orderStatus} from 'utils';
import CheckOption from './CheckOption/CheckOption';
import {businessRepeatCheckAction} from './index';
import {bindActionCreators} from "redux";
import {repeatCheckClomns} from './constant';
class BusinessRepeatCheck extends Component {
    params = ['baseInfo', 'operatorInfo', 'checkResult']

    constructor(props) {
        super(props);
        this.state = {
            isShowDetail: this.getParamsOption(this.props)
        };
        const _this = this;
        this.pageSize = 10;
        this.orderId = '';
        this.ccdata = [];
        this.columns = repeatCheckClomns.concat(
            {
                title: '操作',
                dataIndex: 'id',
                key: 'id',
                render(text, record) {
                    return (
                        <div onClick={() => _this.handleClick(record)} className={styles.check}><Icon type={'edit'}/>
                        </div>
                    );
                }

            }
        )
    }

    getParamsOption = (props) => {
        const {location: {search}} = props;
        const obj = covertUrlParams(search);
        const arr = Object.keys(obj);
        return arr.indexOf('option') !== -1 && this.params.indexOf(obj['option']) !== -1;
    }
    //获取订单详情，跳转审核页面
    handleClick = (record) => {
        const { setOrderId, getDetailData } = this.props;
        const { id, userId } = record;
        //保存id
        setOrderId(id);
        // console.log(record);
        getDetailData({orderId: id, userId});
    }
    //获取订单
    getOrder = () => {
        const { distributeOrder } =  this.props;
        distributeOrder({});
    }

    //表格分页
    handlePageChange = (info) => {
        const {current, pageSize} = info;
        const {getTableData} = this.props;
        getTableData({pageNum: current, pageSize})
    }
    //审核
    handleCheck = (obj) => {
        let { checkOption, reason, remark} = obj;
        reason = remark === undefined ? reason : remark;
        const  {postCheck, orderId } = this.props;
        postCheck({orderId, status: checkOption, reason});
    }

    componentDidMount() {
        const {getTableData} = this.props;
        getTableData({pageNum: 1, pageSize: this.pageSize});
    }

    componentWillReceiveProps(nextProps) {
        const next = this.getParamsOption(nextProps);
        const current = this.getParamsOption(this.props);
        if(next !== current) {
            this.setState({ isShowDetail: next });
        }
    }
    componentWillUnmount() {
        const { setTableData } = this.props;
        setTableData({
            data: [],
            pagination: {}
        })
    }
    componentDidUpdate(prevProps, prevState) {
        const { isShowDetail } = prevState;
        if(isShowDetail && isShowDetail !==  this.state.isShowDetail) {
            const {getTableData} = this.props;
            getTableData({pageNum: 1, pageSize: this.pageSize});
        }
    }

    render() {
        const {tableData: {data, pagination}, loading, btnLoading, allData, surplusOrder} = this.props;
        const { isShowDetail } = this.state;
        return (
            <div>
                {
                    isShowDetail ? <div>
                            <CheckOption
                                loading={btnLoading}
                                allData={allData}
                                isLastCheck={false}
                                handleSubmit={this.handleCheck}
                            />
                        </div> :
                        <div>
                            <div>
                                <div className={styles.btn}>
                                    <Button onClick={this.getOrder} type={'primary'}>获取订单</Button>
                                </div>
                                <Alert message={`可审核订单数：${surplusOrder}`} type="info"/>
                            </div>
                            <CommonTable
                                handlePageChange={this.handlePageChange}
                                columns={this.columns}
                                pagination={pagination}
                                loading={loading}
                                dataSource={data}
                            />
                        </div>
                }
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    const {windControlCheckState: {businessRepeatCheckState}} = state;
    return {
        tableData: businessRepeatCheckState['data'],
        loading: businessRepeatCheckState['loading'],
        btnLoading: businessRepeatCheckState['submitLoading'],
        allData: businessRepeatCheckState['allData'],
        orderId: businessRepeatCheckState['orderId'],
        surplusOrder: businessRepeatCheckState['surplusOrder']
    }
};
const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({
        getTableData: businessRepeatCheckAction.wccGetTableData,
        setTableData: businessRepeatCheckAction.wccSetTableData,
        getDetailData: businessRepeatCheckAction.wccGetDetailData,
        postCheck: businessRepeatCheckAction.wccPostCheckInfo,
        setOrderId: businessRepeatCheckAction.wccSetOrderId,
        distributeOrder: businessRepeatCheckAction.wccDistributeOrder,
        repeatDistributeOrder: businessRepeatCheckAction.wccRepeatDistribute
    }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(BusinessRepeatCheck);